---
title: Next.js
description: Next.js-spezifische Linting-Regeln für Ultracite.
---

Die Next.js-Konfiguration enthält Next.js-spezifische Linting-Regeln für Bildoptimierung, Dokumentstruktur und App Router-Muster.

## Installation

Fügen Sie die Next.js-Konfiguration zu Ihrer `biome.jsonc` hinzu:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Übersicht

Diese Konfiguration fügt Regeln hinzu, die speziell auf die Next.js-Entwicklung ausgerichtet sind:

- **Bildoptimierung**: Erzwingt die Verwendung der Next.js `<Image>`-Komponente
- **Dokumentenstruktur**: Verhindert unsachgemäße Verwendung spezieller Next.js-Komponenten
- **Client-Komponenten**: Stellt sicher, dass asynchrone Client-Komponenten korrekt behandelt werden
- **Konfigurationsdateien**: Spezielle Behandlung für `next.config.*`-Dateien

## Next.js-spezifische Regeln

### Experimentell

| Regel | Einstellung | Beschreibung |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Verhindern Sie asynchrone Client-Komponenten in Next.js. Client-Komponenten sollten synchron sein; verwenden Sie Server-Komponenten für asynchrone Vorgänge. |

### Leistung

| Regel | Einstellung | Beschreibung |
|------|---------|-------------|
| `noImgElement` | `error` | Verbot der Verwendung des HTML-Elements `<img>`. Verwenden Sie stattdessen die Next.js `<Image>`-Komponente zur automatischen Bildoptimierung. |

### Stil

| Regel | Einstellung | Beschreibung |
|------|---------|-------------|
| `noHeadElement` | `error` | Verbot der Verwendung des HTML-Elements `<head>`. Verwenden Sie stattdessen `next/head` oder die Metadata-API des App Routers. |

### Verdächtig

| Regel | Einstellung | Beschreibung |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Verhindern Sie das Importieren von `next/document` in Seiten-Dateien. `_document.tsx` darf nur in `pages/_document.tsx` existieren. |
| `noHeadImportInDocument` | `error` | Verhindern Sie das Importieren von `next/head` in `_document.tsx`. Verwenden Sie stattdessen `<Head>` aus `next/document`. |

## Überschreibungen für Konfigurationsdateien

Das Next.js-Preset enthält spezielle Behandlung für Konfigurationsdateien und App Router-Komponenten:

### Next.js-Konfigurationsdateien

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Dies ermöglicht Next.js-Konfigurationsmuster, die normalerweise nicht die Linting-Regeln bestehen würden.

### App Router-Seiten und Layouts

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

App Router-Seiten- und Layout-Komponenten dürfen asynchron sein, ohne dass `await` erforderlich ist, da Next.js diese speziell für serverseitiges Rendering und Datenabruf behandelt.